import { useEffect, useState } from 'react'
import { HashRouter, Link, Route } from 'react-router-dom/cjs/react-router-dom.min'
import FindMusic from './pages/FindMusic'
import MyFollow from './pages/MyFollow'
import MyMusic from './pages/MyMusic'

export default function App () {
  const [currentHash, setCurrentHash] = useState('#/findmusic')
  useEffect(() => {
    const hashChange = () => {
      setCurrentHash(window.location.hash)
    }
    window.addEventListener('hashchange', hashChange)
  }, [])

  return (
    <HashRouter>
      <div>
        <nav className='navbar navbar-expand-lg navbar-light bg-light'>
          <div className='container'>
            <Link className='navbar-brand' href='##'>
              网易云
            </Link>
            <button
              className='navbar-toggler'
              type='button'
              data-bs-toggle='collapse'
              data-bs-target='#navbarSupportedContent'
              aria-controls='navbarSupportedContent'
              aria-expanded='false'
              aria-label='Toggle navigation'
            >
              <span className='navbar-toggler-icon'></span>
            </button>
            <div className='collapse navbar-collapse' id='navbarSupportedContent'>
              <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
                <li className='nav-item'>
                  <Link className='nav-link' to='/findmusic'>
                    发现音乐
                  </Link>
                </li>
                <li className='nav-item'>
                  <Link className='nav-link' to='/mymusic'>
                    我的音乐
                  </Link>
                </li>
                <li className='nav-item'>
                  <Link className='nav-link' to='/myfollow'>
                    关注
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div className='card container mt-3'>
          <div className='card-body'>
            {/* {currentHash === '#/findmusic' && <FindMusic />}
          {currentHash === '#/mymusic' && <MyMusic />}
          {currentHash === '#/myfollow' && <MyFollow />} */}
            <Route path='/findmusic' component={FindMusic}></Route>
            <Route path='/mymusic' component={MyMusic}></Route>
            <Route path='/myfollow' component={MyFollow}></Route>
          </div>
        </div>
      </div>
    </HashRouter>
  )
}